<script setup lang="ts">
import { useDetail } from "@/views/property/utils/hooks";
import { ref } from "vue";
import { getPropertyInfo, getResidentialInfo } from "@/api/community";
import { message } from "@/utils/message";

defineOptions({
  name: "propertyInfo"
});

const { initToDetail, getParameter } = useDetail();
initToDetail("params");

const data = ref({});
const property = ref({});

// async function getInfo() {
//   getResidentialInfo(getParameter.id)
//     .then(res => {
//       if (res.code === 200) {
//         data.value = res.data;
//         console.log(data.value);
//       } else {
//         message(res.msg, { type: "error" });
//       }
//     })
//     .finally(() => {
//       getProperty();
//     });
// }

function getProperty() {
  console.log(getParameter.id);
  getPropertyInfo(getParameter.id).then(res => {
    if (res.code === 200) {
      property.value = res.data;
    } else {
      message(res.msg, { type: "error" });
    }
  });
}

getProperty();
</script>

<template>
  <div class="main-container">
    <h1 style="text-align: center">{{ property.name }}物业详细信息</h1>
    <el-descriptions direction="vertical" :column="4" size="large" border>
      <el-descriptions-item label="物业ID">{{ property.id }}</el-descriptions-item>
      <el-descriptions-item label="联系方式">
        {{ property.phone }}
      </el-descriptions-item>
<!--      <el-descriptions-item label="所属物业" :span="2"-->
<!--        >{{ data.propertyId === null ? "尚未分配" : property.name }}-->
<!--      </el-descriptions-item>-->
<!--      <el-descriptions-item label="建筑面积">-->
<!--        <el-tag size="small">{{ data.buildArea }}㎡</el-tag>-->
<!--      </el-descriptions-item>-->
      <el-descriptions-item label="小区地址"
        >{{ property.address }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<style scoped lang="scss"></style>
